<template>
  <div class="container">
    <top-nav :toLastPath="true">返回</top-nav>
    <div class="title">公司资料信息填写</div>
    <ul>
      <li>
        <span>企业名称</span>
        <input type="text" name="name" placeholder="请输入企业名称" v-model="name">
      </li>
      <li>
        <span>联系人</span>
        <input type="tel" name="name" placeholder="请填写联系人" v-model="legal">
      </li>
      <li>
        <span>手机号码</span>
        <input type="text" name="name" placeholder="请填写联系方式" v-model="contact_number">
      </li>

      <li>
          <div class="picker">
            <span>公司地址</span>
            <input @click="showpopupArea" type="text" name="name" placeholder="选择公司地址" v-model="addressInput" readonly><span @click="showpopupArea">></span>
          </div>
          <popup-picker ref="area" :col="areaList" columns_type='area' @getSelectValue="getAreaValue"></popup-picker>
      </li>
      <li>
        <span>详细地址</span>
        <input type="tel" name="name" placeholder="请填写详细地址" v-model="addressDetailed">
      </li>
      <li>
        <span>企业简介</span>
        <input type="tel" name="name" placeholder="请填写企业简介" v-model="profile">
      </li>
      <!-- <li> -->
        <!-- <picker mode="selector"  :range="industry" @change="industrySelect"> -->
          <!-- <div class="picker">
            <span>所属行业</span>
            <input type="text" name="name" placeholder="选择所属行业" :value="industryInput">
            <span>></span>
          </div> -->
        <!-- </picker> -->
        <!-- <div class="picker">
          <span>所属行业</span>
          <input @click="showPicker" type="text" name="name" placeholder="选择所属行业" v-model="industryInput" readonly><span @click="showPicker" >></span>
        </div>
          <popup-picker :col="industry"  ref="classify" @getSelectValue="getClassifyValue"></popup-picker>  -->
      <!-- </li> -->
      <li>
        <!-- <picker mode="selector"  :range="larger" @change="largerSelect"> -->
          <!-- <div class="picker">
            <span>企业规模</span>
            <input type="text" name="name" placeholder="选择企业规模" :value="largerInput">
            <span>></span>
          </div> -->
        <!-- </picker> -->
        <div class="picker">
          <span>企业规模</span>
          <input @click="showLarger" type="text" name="name" placeholder="选择企业规模" v-model="largerInput" readonly><span @click="showLarger" >></span>
        </div>
          <popup-picker :col="larger"  ref="larger" @getSelectValue="getLargerValue"></popup-picker>
      </li>
      <li style="margin-top:10px;height:40px;">
        <span>商标</span>
        <!-- <img :src="logoImg.src" class="addImg" @click="upLoadImg"/> -->
        <span class="band">
          <van-uploader :after-read="onRead">
          <img :src="logoImg.src" class="addImg" />
          </van-uploader>
          <div class="imgDel" @click="delImg" v-if="logoImg.id!=''&& logoImg.id!=0"></div>
        </span>
      </li>
      <div class="commit" @click="commit">
        <div>保存</div>
      </div>
    </ul>
  </div>
</template>

<script>
import areaList from '@/assets/area';
import topNav from '@/components/topNav';
import popupPicker from '@/components/popupPicker';
import { Toast } from 'vant';
export default {
  data () {
    return {
      isUpload:true,  //判断是否上传照片  ，微信小程序有个bug  wx.chooseImage方法选择图片会执行app.js中的onLaunch、onShow方法 当前页面的onHide、onShow方法
      name:"",
      contact_number:"",
      region: ['广东省', '广州市', '海珠区'],
      addressDetailed:"",//详细地址
      addressInput:"",//公司地址
      profile:"",//公司简介
      industry:[],//所属行业选项
      industryArr:[],//所属行业的id数组
      industrySelectId:"",//所属行业选中的id
      larger:['0-20人','21-50人','51-100人','101-500人','501-1000人','1000人以上'],//企业规模选项
      legal:"",//联系人
      industryInput:"",//所属行业显示
      largerInput:"",//企业规模显示
      logoImg:{src:'http://file.rzkeji.com/web/recruit/icon/addImg.png',id:""},//公司logo
      type:"",
      areaList:areaList,
    }
  },
  components:{
    popupPicker,
    topNav
  },
  computed: {
    // addressInput(){
    //   return this.region[0]+this.region[1]+this.region[2]
    // }
  },

  methods: {
    async commit(){
      if(this.name==''){
        Toast('企业名称不能为空')
        return
      }else if(this.legal==''){
        Toast('联系人不能为空')
        return
      }else if(this.contact_number==''){
        Toast('电话号码不能为空')
        return
      }else if(this.addressInput==''){
        Toast('公司地址不能为空')
        return
      }
      var userToken=window.localStorage.getItem('userToken')
      let res=await this.$axios.post('/ucenter/setCompanyInfo',{
        user_token:userToken,
        name:this.name,
        introduction:this.profile,
        province:this.region[0],
        city:this.region[1],
        area:this.region[2],
        address_detail:this.addressDetailed,
        size:this.largerInput,
        contacts:this.legal,
        contact_phone:this.contact_number,
        photo_id:this.logoImg.id,
        industry_id:this.industrySelectId
      });
      if(res.data.level=="success"){
        if(this.type=='personal'){
          // this.$currency.navigateTo("/pages/memberCenter/personal/main")
          this.$router.push('/me/authentication/personal')
        }else{
          // this.$currency.navigateTo("/pages/memberCenter/enterprise/main")
          this.$router.push('/me/authentication/enterprise')
        }
      }
    },
    showpopupArea(){
      this.$refs.area.$data.showArea=true;
    },
    showPicker(){
      this.$refs.classify.$data.showArea=true;
    },
    showLarger(){
      this.$refs.larger.$data.showArea=true;
    },

    getAreaValue(e){
        this.region[0]=e[0].name
        this.region[1]=e[1].name
        this.region[2]=e[2].name
        this.addressInput=e[0].name+e[1].name+e[2].name
    },
    getClassifyValue(e){
      this.industryInput=e
      for(let p in this.industry){
        if(this.industry[p]==e){
          this.industrySelectId=this.industryArr[p]
        }
      }
    },
    getLargerValue(e){
      this.largerInput=e
    },
    // industrySelect(e){
    //   this.industryInput=this.industry[e.target.value]
    //   this.industrySelectId=this.industryArr[e.target.value]
    // },
    // largerSelect(e){
    //   this.largerInput=this.larger[e.target.value]
    // },
    // async upLoadImg(){
    //   var _this=this;
    //   this.isUpload=false
    //   let res=await this.$currency.upLoadImage()
    //   _this.logoImg.src=JSON.parse(res.data).data.img_url
    //   _this.logoImg.id=JSON.parse(res.data).data.id
    // },
    async onRead(file) {
      let f=file.content;
      this.logoImg.src='http://file.rzkeji.com/web/recruit/icon/loading.svg';
      this.$axios.post(
        '/file/UploadBase64',
        {base_code:f}

      ).then((res)=>{
        this.logoImg.src=res.data.data.img_url
        this.logoImg.id=res.data.data.id
        })
    },
    delImg(){
      this.logoImg={src:'http://file.rzkeji.com/web/recruit/icon/addImg.png',id:""}
    },
    async getInformation(){  //获取企业信息
      var userToken=window.localStorage.getItem('userToken')
      let res=await this.$axios('/ucenter/getCompanyInfo',{params:{user_token:userToken}})
      let data=res.data.data
      if(res.data.level=='success'){
        this.name=data.name
        this.legal=data.contacts
        this.contact_number=data.contact_phone
        this.addressInput=data.province+data.city+data.area
        this.region[0]=data.province
        this.region[1]=data.city
        this.region[2]=data.area
        this.addressDetailed=data.address_detail
        this.profile=data.introduction
        this.industryInput=data.industry
        this.largerInput=data.size
        this.logoImg.src=data.photo_url
        this.logoImg.id=data.photo_id
      }
    },
    async getIndustryData(){
      this.industry=[]
      this.industryArr=[]
      let res=await this.$axios('/position/getIndustryList')
      for([index,value] of res.data.data.entries()){
        this.industry.push(value.name)
        this.industryArr.push(value.id)
      }
    }
  },
  activated(){
    this.name=''
    this.legal=''
    this.contact_number=''
    this.addressInput=''
    this.region[0]=''
    this.region[1]=''
    this.region[2]=''
    this.addressDetailed=''
    this.profile=''
    this.industryInput=''
    this.largerInput=''
    this.logoImg={src:'http://file.rzkeji.com/web/recruit/icon/addImg.png',id:""}
    // if(this.isUpload){
      this.getInformation();
      this.getIndustryData();
    // }
    this.type=this.$route.params.type
  }
}
</script>

<style scoped>
.title{width: 100%;height: 51px;line-height: 51px;text-align: center;font-size: 22px;color: #000000;background-color: #fff;margin-bottom: 5px;margin-top:50px;}
.container{padding-bottom:89px;background-color: #F8F8FB;}
.container ul{width: 100%;}
.container ul li{width: 100%;height: 20px;display: flex;justify-content: row;padding: 20px 0px;background-color: #fff;margin-bottom: 2px;}
.container ul li span:nth-of-type(1){width: 100px;font-size: 17px;color: #000000;padding-left: 25px;}
.container ul li input{width: 223px;border: 0px;font-size: 15px;color: #B2B2B9;}
.container ul li span:nth-of-type(2){margin-right: 10px;font-size: 20px;color:#B2B2B9;}
.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;z-index: 99}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #FFFFFF;}
picker,.picker{width: 100%;height: 100%;display: flex;justify-content: row;}
.addImg{width: 51px;height: 51px;}

.band{position: relative;}
.imgDel{background:url('~@/assets/del.png') no-repeat;height: 20px;width: 20px;display: inline-block;background-size: 100%;position: absolute;right:-5px;top:-10px;background-color:#fff;border-radius: 50%}
</style>
